<template>
  <template v-for="(item, num) in menu" :key="num">
    <el-sub-menu v-if="item.children && item.children.length > 0" :index="item.index">
      <template #title>
        <e-icon v-if="item.icon" :type="item.icon"></e-icon>
        <span>{{item.title}}</span>
      </template>
      <menu-tree :menu="item.children" @menuItemClick="handleMenuClick"></menu-tree>
    </el-sub-menu>
    <el-menu-item v-else :index="item.index" @click="handleMenuClick(item)">
      <e-icon v-if="item.icon" :type="item.icon"></e-icon>
      <template #title>
        <span>{{item.title}}</span>
      </template>
    </el-menu-item>
  </template>
</template>

<script setup lang="ts" name="MenuTree">
import { ComponentInternalInstance, getCurrentInstance } from 'vue'
import EIcon from '@/components/e-icon/e-icon.vue'

const { proxy } = getCurrentInstance() as ComponentInternalInstance

const emit = defineEmits(['menuItemClick'])

const props = defineProps({
  menu: {
    type: Object,
    default: () => {}
  }
})

// 侧栏项目点击事件
const handleMenuClick = (item: any) => {
  emit('menuItemClick', item)
}
</script>

<style lang="stylus">
.el-menu-item
    &.is-active
      background rgba(0, 0, 0, .2)
  .el-sub-menu
    .el-sub-menu__title
      background transparent !important
.el-menu--collapse
  .el-sub-menu
    transition background .2s linear
    &.is-opened
      background var(--el-menu-hover-bg-color)
.el-menu--popup-container
  .el-menu-item
    color black
</style>
